import React from 'react'
import { Button, Popup, Image, Space } from 'react-vant';
import style from "./index.module.less"

const NoAuthView = ({ popupVis, select, title, tableData, onCancel, onOk, src }) => {

  return (
    <Popup round style={{ width: "80%" }} visible={popupVis}>
        <div style={{ background: "linear-gradient( 180deg, #FFFFFF 0%, #EBF7FF 100%)" }}>
            <div className={style.title}>
                <Image src={src} width={26} height={26} />
                <div style={{ marginLeft: 5, color: "#232323", fontSize: 20 }}>{title}</div>
            </div>
            <div style={{ padding: "0px 20px 20px 20px" }}>
                <div style={{ width: "100%", display: 'flex', justifyContent: 'center', alignItems: 'center', color: "#FF0000", fontSize: 16 }}>
                    以下<span style={{ padding: '0 5px', color: '#232323', fontSize: 20,  }}>{select.length}</span>个信息将做库存登录操作！
                </div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flexWrap: 'wrap' }}>
                    {select.map((item, index) => {
                        return (
                            <div key={index} style={{ padding: '0 8px', borderRadius: 5, color: '#1A7BFE', fontSize: 18, border: '1px solid #1A7BFE', marginTop: 10, marginLeft: 5 }}>
                                {tableData.find((val) => val?.id === item)?.stockNo}
                            </div>
                        )
                    })}
                </div>
            </div>
            <div style={{ width: "100%", backgroundColor: "transparent", display: "flex", alignItems: 'center', justifyContent: "center", padding: "20px 0px" }}>
            <Space>
                <Button onClick={onCancel} round style={{ width: 120, boxShadow: "0px 0px 9px 0px rgba(0,0,0,0.21)", fontSize: 18, color: "#808080" }}>取消</Button>
                <Button onClick={onOk} round style={{ width: 120, background: "linear-gradient( 90deg, #59B8EF 0%, #1677FF 100%)", boxShadow: '0px 0px 9px 0px rgba(0,0,0,0.5)', fontSize: 18, color: "#fff", border: "none" }}>确认</Button>
            </Space>
            </div>
        </div>
    </Popup>
  )
}

export default NoAuthView;
